<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme"
                     style="min-width: 1100px;"
  >
    <module-header name="app" value="/manage/department" is-telescreen />

    <main-content>
      <n-space>
        <n-h2>部门名称</n-h2>
        <n-input round placeholder="请输入名称" style="width: 300px;">
          <template #suffix>
            <n-icon :component="Search" />
          </template>
        </n-input>
        <n-button type="primary" class="absolute right-0" @click="isShowCreateDepartment=true">
          创建部门
        </n-button>
      </n-space>
      <n-data-table v-model:data="data" :columns="columns" :pagination="pagination" />
      <n-form-modal v-model:show="isShowCreateDepartment" title="创建部门" :fields="createDepartmentList"
                    :on-confirm="onCreateDepartmentConfirm"
      />
      <n-form-modal v-model:show="isShowUpdateDepartmentList" title="修改用户信息" :fields="updateDepartmentList"
                    :on-confirm="onUpdateDepartmentConfirm"
      />
      <n-modal v-model:show="showDelModal"
               preset="dialog"
               title="确认"
               content="确认删除?"
               positive-text="确认"
               negative-text="算了"
               @positive-click="showDelModal = false"
               @negative-click="showDelModal = false"
      />
    </main-content>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { ref, onMounted, h, reactive } from 'vue'
import { Search } from '@vicons/ionicons5'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NConfigProvider,NDataTable,NH2,NButton,NIcon,NInput, NSpace, NModal } from 'naive-ui'
import { nav } from '../../shared/client/window'
import { axiosReq } from '../../shared/client/axios'
import { actErr } from '../../shared/client/interact'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'
import { reqGetAllDepartment } from './manage.def'
import NFormModal, { Item as FormModalItem } from '../../components/naive/n_form_modal.vue'

//定义表格数据的类型
type RowData = {
  number: string,
  departName: string,
  principal: string,
  email: string,
  address: string,
  code: string,
  key: number
}

//定义表格一页多少行
const pagination = {
  pageSize: 3
}

const buttons = [{ label:'修改',func:update }, { label:'删除',func:update }]

//定义列名
const columns = [
  {
    title: '部门编号',
    key: 'number'
  },
  {
    title: '部门名',
    key: 'departName'
  },
  {
    title: '负责人编号',
    key: 'principal'
  },
  {
    title: '部门邮箱',
    key: 'email'
  },
  {
    title: '部门地址',
    key: 'address'
  },
  {
    title: '部门编码',
    key: 'code'
  },
  {
    title: '操作',
    key: 'operate',
    render (row) {
      return buttons.map((item, index) => (
        h(
          NButton,
          {
            size: 'small',
            key: index, // 添加唯一的 key，通常使用数组索引作为 key
            onClick: () => item.func(event,row)
          },
          { default: () => item.label },
        )
      ))
    }
  }
]

//初始化表格数据
const data = ref<RowData[]>([{
  number: 'string',
  departName: 'string',
  principal: 'string',
  email: 'string',
  address: 'string',
  code: 'string',
  key: 0
}])

const showDelModal = ref(false)

//是否展示新增部门表单
const isShowCreateDepartment = ref(false)

//定义新增部门表单
const createDepartmentList: FormModalItem[] = [{
  title: '部门名',
  placeholder: '请输入',
  type: 'input',
  key: 'departName'
},{
  title: '负责人编号',
  placeholder: '请输入',
  type: 'input',
  key: 'principal'
},{
  title: '部门邮箱',
  placeholder: '请输入',
  type: 'input',
  key: 'email'
},{
  title: '部门地址',
  placeholder: '请输入',
  type: 'input',
  key: 'address'
},{
  title: '部门编码',
  placeholder: '请输入',
  type: 'input',
  key: 'code'
}]
//确认提交新增部门表单
async function onCreateDepartmentConfirm(form: any) {
  console.log(form)
}

//是否展示更新部门表单
const isShowUpdateDepartmentList = ref(false)

//定义更新部门表单
const updateDepartmentList: FormModalItem[] = reactive([{
  title: '部门名',
  placeholder: '请输入',
  type: 'input',
  key: 'departName'
},{
  title: '负责人编号',
  placeholder: '请输入',
  type: 'input',
  key: 'principal'
},{
  title: '部门邮箱',
  placeholder: '请输入',
  type: 'input',
  key: 'email'
},{
  title: '部门地址',
  placeholder: '请输入',
  type: 'input',
  key: 'address'
},{
  title: '部门编码',
  placeholder: '请输入',
  type: 'input',
  key: 'code'
}])

//确认提交修改用户表单
async function onUpdateDepartmentConfirm(form: any) {
  console.log(form)
}

onMounted(async ()=>{
  const res = await reqGetAllDepartment(axiosReq)
  console.log(res)

  data.value = res.data.map(item => ({
    number: item.id,
    departName: item.departName,
    principal: item.principal,
    email: item.mail,
    address: item.address,
    code: item.code,
    key: item.id
  }))

})

//更新部门信息
function update(event,data) {
    console.log(data)
  if (event.target.innerText === '修改') {
    updateDepartmentList[0].value = data.departName
    updateDepartmentList[1].value = data.principal
    updateDepartmentList[2].value = data.email
    updateDepartmentList[3].value = data.address
    updateDepartmentList[4].value = data.code
    isShowUpdateDepartmentList.value = true
  } else if(event.target.innerText === '删除') {
    showDelModal.value = true
  }
}
</script>

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
